<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>首页</title>
		<script src="./js/rem.js"></script>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./imgs/font/iconfont.css">
		<link rel="stylesheet" href="css/swiper.css">
		<link rel="stylesheet" href="./css/index.css">

	</head>
	<body>
		<!-- 轮播图 -->
		<div class="swiper-container swiper-banner clearfix" style="background: #ffffff;">
			<div class="swiper-wrapper" id="topwoper" style="">
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div>
			<ul class="nav clearfix">
				<li class="fl"><img src="http://bingoshop.oss-cn-beijing.aliyuncs.com/images/ch_new.jpg" alt=""><span>新品推荐</span></li>
				<li class="fl"><img src="http://bingoshop.oss-cn-beijing.aliyuncs.com/images/ch_hot.jpg" alt=""><span>热销榜</span></li>
				<li class="fl"><img src="http://bingoshop.oss-cn-beijing.aliyuncs.com/images/ch_group.jpg" alt=""><span>团购区</span></li>
				<li class="fl"><img src="http://bingoshop.oss-cn-beijing.aliyuncs.com/images/ch_topic.jpg" alt=""><span>专题区</span></li>
				<li class="fl"><img src="http://bingoshop.oss-cn-beijing.aliyuncs.com/images/ch_topic.jpg" alt=""><span>联系客服</span></li>
			</ul>
		</div>
		<!-- 优惠券 -->
		<img src="" alt="" class="ad1">
		<p class="group-buy clearfix">今日<span>必团</span><a href="" class="fr">查看更多</a></p>
		
		<ul class="group-list clearfix">
		</ul>
		<img src="" alt="" class="ad2">
		<!-- 新品首发 -->
		<p class="recommend">推荐&nbsp;&nbsp;<span>新品首发</span></p>
		<div class="newGoods">
			<ul class="clearfix new-goods">
			</ul>
		</div>
		<!-- 爆款人气推荐 -->
		<p class="recommend">爆款&nbsp;&nbsp;<span>人气推荐</span></p>
		<div class="hotGoods">
			<ul class="clearfix hot-goods">
			</ul>
		</div>
		<!-- 专题精选 -->
		<p class="recommend">专题精选</p>
		<div class="topicList">
			<img src="" alt="">
			<p><span>防臭袜开创者</span><b>￥119元起</b></p>
			<div>原创设计春款系列上新</div>
		</div>

		<div class="floorGoodsList">
		</div>
		<div class="footer">
			<ul class="foot-tab clearfix">
				<li class="fl"><span class="iconfont icon-home"></span><span>首页</span></li>
				<li class="fl"><span class="iconfont icon-searchlist"></span><span>分类</span></li>
				<li class="fl"><span class="iconfont icon-gouwuche1"></span><span>购物车</span></li>
				<li class="fl"><span class="iconfont icon-wode"></span><span>我的</span></li>
			</ul>
		</div>
		<script src="js/template-web.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src='js/swiper.min.js'></script>
		<script src='js/http.js'></script>
		<script src='js/api/index.js'></script>
		<script>
			$(document).ready(function(){
			indexApi.indexNav().then(function(data){
				if(data.errno==0){
					console.log(data.data)
					bannerAd(data.data.banner)
					groupList(data.data.grouponList)
					newGoods(data.data.newGoodsList)
					hotGoods(data.data.hotGoodsList)
					floorGoodsList(data.data.floorGoodsList)
					$('.topicList img').attr('src',data.data.topicList[0].picUrl)
					$('.topicList p span').html(data.data.topicList[0].title)
					$('.topicList div').html(data.data.topicList[0].subtitle)
					$('.topicList p b').html('￥'+data.data.topicList[0].price+'元起')
					$('.ad1').attr('src',data.data.ad1[0].url)
					$('.ad2').attr('src',data.data.ad2[0].url)
				} else {
					alert(data.errmsg)
				}
			})
			
			//轮播图
			var bannerAd = function(data){
				var html = template('adTmpl', {
					"list": data
				});
				// console.log(html)
				$("#topwoper").append(html);
				$(".swiper-banner").swiper({
					loop: true,
					autoplay: 3000
				});
			}
			
			//团购
			var groupList = function(data){
				var html = template('group-list',{
					'list':data
				})
				// console.log(html)
				$('.group-list').append(html);
				
			}
			
			//新品首发
			var newGoods = function(data){
				var html = template('newGoods',{
					'list':data
				})
				// console.log(html)
				$('.new-goods').append(html);
			}
			
			//人气推荐
			var hotGoods = function(data){
				var html = template('hotGoods',{
					'list':data
				})
				// console.log(html)
				$('.hot-goods').append(html);
			}
			
			//商品分类
			var floorGoodsList = function(data){
				var html = template('floorGoodsList',{
					'list':data
				})
				// console.log(html)
				$('.floorGoodsList').append(html);
			}
			$('.new-goods').on('click','li',function(){
				var  id= $(this).data('id');
				$(this).children('a').attr('href','./html/goods/goodsDetail.html?id='+id)
			})
		})


	</script>
		<!-- //轮播图 -->
		<script id="adTmpl" type="text/html">
			{{each list item i}}
		<div class="swiper-slide">
			<a><img class="link-img" src="{{item.url}}"/></a>
		</div>
	{{/each}}
	</script>
		<!-- //团购 -->
		<script id="group-list" type="text/html">
			{{each list item i}}
		<li class="fl"><img src="{{item.goods.picUrl}}" alt="" data-id="{{item.id}}"><span>{{item.groupon_member}}人团&nbsp;<em>￥{{item.groupon_price}}</em></span></li>
		{{/each}}
	</script>
		<!-- 新品首发 -->
		<script id="newGoods" type="text/html">
			{{each list item i}}
		<li class="fl" data-id="{{item.id}}">			<a href=""><img src="{{item.picUrl}}" alt="">
				<p>{{item.name}}</p>
				<p><span class="fl">￥{{item.retailPrice}}</span><em class="fr">{{item.saleCount}}人已抢</em></p>
			</a>
		</li>
		{{/each}}
	</script>
		<!-- 人气推荐 -->
		<script id="hotGoods" type="text/html">
			{{each list item i}}
		<li clas="clearfix"><img src="{{item.picUrl}}" alt="" class="fl">
			<div class="fl">
				<p>{{item.name}}</p>
				<p>{{item.brief}}</p>
				<p><span>￥{{item.retailPrice}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>{{item.saleCount}}人已抢</em></p>
			</div>
			
		</li>
		{{/each}}
	</script>
		<!-- 商品分类 -->
		<script id="floorGoodsList" type="text/html">
			{{each list item i}}
		<p class="category-name">{{item.name}}</p>
		<ul class="clearfix">
			{{each item.goodsList items index}}
			<li class="fl">
				<p class="img-content"><img src="{{items.picUrl}}" alt=""></p>
				<p>{{items.name}}</p>
				<p class="clearfix"><span class="fl">￥{{items.retailPrice}}</span><em class="fr">{{items.saleCount}}人已抢</em></p>
			</li>
			{{/each}}
		</ul>
		{{/each}}
	</script>
	</body>
</html>
